<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 按钮 -->
    <div class="sale-btn">
      <div class="warp">
        <div class="touris-down">
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">带看方式</div>
            <div class="sale-list-li-input">
              <select v-model="LookValue" placeholder="请选择" style="width: 95%;" class="sale-list-li-input_box">
                <option
                  v-for="item in Look"
                  :key="item.LookValue"
                  :label="item.label"
                  :value="item.LookValue">
                </option>
              </select>
            </div>
          </div>
          <!-- 带看时间 -->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">带看时间</div>
            <div class="sale-list-li-input">
                <el-date-picker
                v-model="timeValue1"
                type="datetime"
                placeholder="选择日期时间"style="width: 95%;cursor: pointer;">
              </el-date-picker>
            </div>
          </div>
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">-----</div>
            <div class="sale-list-li-input">
              <el-date-picker
                v-model="timeValue1"
                type="datetime"
                placeholder="选择日期时间"style="width: 95%;cursor: pointer;">
              </el-date-picker>
            </div>
          </div>
          <!-- 全部 emd-->

          <!--部门-->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">部门</div>
            <div class="sale-list-li-input">
              <select v-model="departmentValue" placeholder="请选择"style="width: 95%;" class="sale-list-li-input_box">
                <option
                  v-for="item in department"
                  :key="item.departmentValue"
                  :label="item.label"
                  :value="item.departmentValue">
                </option>
              </select>
            </div>
          </div>
          <!--部门-->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">楼盘</div>
            <div class="sale-list-li-input">
              <select v-model="inteValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in screen.TouristsPurchaseintention"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <!-- 求租 emd-->
          <!-- 状态 -->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">区域</div>
            <div class="sale-list-li-input">
              <select v-model="stateValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in screen.TouristsState"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <!-- 状态 emd-->
          <!-- 公私客 -->
          <!-- 门店 -->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">门店</div>
            <div class="sale-list-li-input">
              <select v-model="storeValue" placeholder="请选择"style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in store"
                  :key="item.storeValue"
                  :label="item.label"
                  :value="item.storeValue">
                </option>
              </select>
            </div>
          </div>
          <!-- 小组 -->
           <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">小组</div>
            <div class="sale-list-li-input">
              <select v-model="GroupValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in Group"
                  :key="item.GroupValue"
                  :label="item.label"
                  :value="item.GroupValue">
                </option>
              </select>
            </div>
          </div>
          <!-- 经纪人 -->
           <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">经纪人</div>
            <div class="sale-list-li-input">
              <select v-model="AgentValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in Agent"
                  :key="item.AgentValue"
                  :label="item.label"
                  :value="item.AgentValue">
                </option>
              </select>
            </div>
          </div>
          <!---->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">分区</div>
            <div class="sale-list-li-input">
              <select v-model="partitionValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in partition"
                  :key="item.partitionValue"
                  :label="item.label"
                  :value="item.partitionValue">
                </option>
              </select>
            </div>
          </div>
          <!---->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">楼栋</div>
            <div class="sale-list-li-input">
              <select v-model="BuildingValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in Building"
                  :key="item.BuildingValue"
                  :label="item.label"
                  :value="item.BuildingValue">
                </option>
              </select>
            </div>
          </div>
          <!---->
          <div class="sale-list-li sale-list-lit">
          <div class="sale-list-li-left sale-list-li-leftt">单元</div>
          <div class="sale-list-li-input">
            <select v-model="unitValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
              <option
                v-for="item in unit"
                :key="item.unitValue"
                :label="item.label"
                :value="item.unitValue">
              </option>
            </select>
          </div>
        </div>
          <!---->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">楼层</div>
            <div class="sale-list-li-input">
              <select v-model="floorValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in floor"
                  :key="item.floorValue"
                  :label="item.label"
                  :value="item.floorValue">
                </option>
              </select>
            </div>
          </div>
          <!---->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">房间</div>
            <div class="sale-list-li-input">
              <select v-model="RoomValue" placeholder="请选择" style="width: 95%;"class="sale-list-li-input_box">
                <option
                  v-for="item in Room"
                  :key="item.RoomValue"
                  :label="item.label"
                  :value="item.RoomValue">
                </option>
              </select>
            </div>
          </div>
          <div class="">
          <el-button class="" @click="SetHourList(1)">查询</el-button>
            <el-button class="">重置</el-button>
        </div>
          <!-- 公私客 end-->
        </div>
      </div>
    </div>
    <!-- 按钮end -->
    <!-- 客源列表 -->
    <div class="sale-info">
      <table>
        <!-- 标题 end-->
        <tr class="sale-info-title">
          <td>编号</td>
          <td>带看时间</td>
          <td>带看次数</td>
          <td>客户姓名</td>
          <td>客户电话</td>
          <td>带看楼盘</td>
          <td>带看房源</td>
          <td>区域</td>
          <td>门店</td>
          <td>小组</td>
          <td>经纪人</td>
          <td>操作</td>
        </tr>
        <!-- 标题 end-->
        <!-- 列表循环 -->
        <tr v-for="item in Tours.data">


        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td><el-button style="background-color:#415dba;color: #fff;" @click="way">查看</el-button></td>
        </tr>
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list">
        <el-pagination
          layout="prev, pager, next"
          :total="Tours.total"
          :current-page="Tours.current_page"
          @current-change="SetHourList"
          :page-size="Tours.per_page">
        </el-pagination>
      </div>
      <!-- 分页 end-->
    </div>
    <!-- 客源列表 end-->
    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->
    <!-- 客源录入 弹窗-->
    <div v-show="Tourshow">
      <Tourmodal :TourClose="tour"></Tourmodal>
    </div>
    <!-- 客源录入 弹窗  end-->
    <!--查看-->
    <div v-show="wayshow">
      <wayshow :LDmodal="opensunmit" :SetHourList="SetHourList" :HtranClose="way"></wayshow>
    </div>
    <!--查看-->
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';
  import Tourmodal from './tour-modal';
  import wayshow from './way';
  export default {
    name:'Take',
    components:{
      heads,
      footers,
      Tourmodal,
      wayshow
    },
    data () {
      return {
        vateValue:'',
        inteValue:'',
        stateValue:'',
        storeValue:'',
        GroupValue:'',
        AgentValue:'',
        timeValue1:'',
        LookValue:'',
        departmentValue:'',
        partitionValue:'',
        BuildingValue:'',
        unitValue:'',
        floorValue:'',
        RoomValue:'',
        screen:{},
        Tourshow:false,
        wayshow:false,
        listss:{},
        Tours:[],
        id:'',
        city:[],
        prov:[],
        user:'',
        // 全部
        AllValue: '',
        all: [{
          AllValue: '选项1',
          label: '默认全部'
        }],
      //  门店
      store:[{
          storeValue: '选项1',
          label: '海口'
        }],
        // 小组
      Group:[{
        GroupValue: '选项1',
        label: '海口'
      }],
      //经纪人
      Agent:[{
        AgentValue: '选项1',
        label: '徐璐璐'
      }],
        Look:[{
          LookValue: '选项1',
          label: '徐璐璐'
        }],
        partition:[{
          partitionValue: '选项1',
          label: '徐璐璐'
        }],
        Building:[{
          BuildingValue: '选项1',
          label: '徐璐璐'
        }],
        department:[{
          departmentValue: '选项1',
          label: '徐璐璐'
        }],
        unit:[{
          unitValue: '选项1',
          label: '徐璐璐'
        }],
        floor:[{
          floorValue: '选项1',
          label: '徐璐璐'
        }],
        Room:[{
          RoomValue: '选项1',
          label: '徐璐璐'
        }],
      }
    },
    methods: {
      // 设置筛选下拉
      SetscreenList(){
        let that = this;
        this.$http.get('/newapi/Touristslist/index')
          .then(function(res) {
            that.screen=res.data.res;
          })
          .catch(function(err) { console.log(catchres);
          })
      },

      // 录入客源
      tour:function(){
        this.Tourshow=!this.Tourshow
      },
      //查看
      way:function(id){
        this.$store.state.areaId = id;
        // this.$refs.wayMethods.parentMethod();
        this.wayshow = true
      },

      SetHourList(page){
        let that = this;
        this.$http.get('/newapi/Tourists/index',{params: {
            page:page,
            tourists_purchaseintention:that.inteValue,
            tourists_state:that.stateValue,
            publicandprivate:that.vateValue,
            agent_id:that.user
          }})
          .then(function(res) {
            that.Tours=res.data.res;
          })
          .catch(function(err) { console.log(catchres);
          })
      },
      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true;
      },
      //关闭弹窗
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false;
      },
    },
    created(){
      // this.getProList();
      let userinfo = JSON.parse(localStorage.userinfo);
      this.defaultArea = userinfo.company.area_code;
      this.SetHourList();
    },
    mounted:function(){
      this.SetscreenList()
      this.SetHourList()
      // 设置省下拉列表
      let that = this;
      that.$http.get('/newapi/Area/getAreaRegion',{params:{country_code:"CN"}})
        .then(function(res) {
          that.prov=res.data.res
        })
        .catch(function(err) { console.log(catchres);
        })
    }
  }
</script>
<style scoped>
  .touris-down{
    width: 100%;
    float: left;
    font-weight:bold
  }
  .sale-list-li-leftt{
    margin-top: 6px!important;
  }
  .sale-list-lit{
    margin-top: 0!important;
  }
  .sale-info{
    width: 100%;
    float: left;
    position: fixed;
    top: 210px;
    height: calc(100% - 256px);
    overflow-y: auto;
  }
  table{
    width: 100%;
  }
  table td{
    line-height: 30px;
    height: 30px;
    border:1px solid #d3d3d3;
  }
  .sale-list-li-inputz input{
    width: 40%!important;
    float: left;
  }
  .sale-list-li-inputz input:nth-child(2){
    margin-left: 8%;
  }
  .sale-list-li-left{
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
  }
  .page-list{
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }
  .sale-list-li{
    width: 100%;
    float: left;
    margin-top:10px;

  }
  .sale-list-li-input{
    width:70%;
    float: left;
  }
  .sale-list-li-input_box{
    height: 27px;
    border: 1px solid rgb(160, 160, 160);
  }
  tr:nth-child(n+2):hover{
    background: #f9f9f9;
  }
  .sale-search{
    margin-left: 25px;
    background: #415dba;
    color: #ffffff;
    font-size: 1.1em;
    border:none;
    height: 30px;
    line-height: 30px;
    width: 60px;
    border-radius: 5px;
  }
  .sale-info-title{
    background-color: #1590ed;
    width: 100%;
    overflow: hidden;
    font-weight:bold;
    color: #fff;
  }
  .sale-list-li-input input{
    width: 90%;
    float: left;
    /* height: 30px; */
    line-height: 30px;
    border-radius: 5px;
    background: #fff;
    border:1px solid #d3d3d3;
  }
  .sale-btn{
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background-color: #ecedee;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 120px;
  }
  .sale-btn button{
    font-size: 1.1em;
    padding:5px 10px;
    border-radius: 5px;
    background: #415dba;
    color: #fff;
    margin-left: 30px;
    border:none;
  }
  .sale-list{
    position: fixed;
    top: 121px;
    background: #f9f9f9;
    float: left;
    width: 100%;
    left: 0;
    height: 136px;
    overflow:hidden;
  }
  .sale-list-li{
    width: 15.666666667%;
    float: left;
  }
  select{
    cursor: pointer;
  }
</style>
